<template>
  <Fragment>
    <div class="head-wrap borderBottom-1px">
      <div class="title left borderBottom-2px">{{title}}</div>
      <div class="operate right">                  
      </div>
    </div>
    <div class="content-wrap">
      <div class="chart-content" ref="outpatientIncomeStatistics">
        2019
      </div>                         
    </div>
    <img src="@/assets/images/card819.png" class="card819" alt="">
  </Fragment>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill'
import { Fragment } from 'vue-fragment'
export default {
  name:'box-card-single-analysis6-jigouyaopinpinzhong',
  components:{Fragment},
  props:{
    title:{
      type:String
    }
  },
  mounted(){
    this.makeData()
  },
  methods:{
    makeData(){
      var dataStyle = {
          normal: {
              label: {
                  show: false,
              },
              labelLine: {
                  show: false,
              },
              // shadowBlur: 15,
              // shadowColor: 'white',
          },
      };
      var placeHolderStyle = {
          normal: {
              color: 'rgba(0,0,0,0)',
              label: {
                  show: false,
              },
              labelLine: {
                  show: false,
              },
          },
          emphasis: {
              color: 'rgba(0,0,0,0)',
          },
      };
      let option4 = {
          backgroundColor: '',
          color: ['#4EC3FF', '#FAD582', '#F98282', '#6D85CE', '#FC8452'],
          tooltip: {
              show: true,
              formatter: '{b} : {c}',
          },
          legend: {
              top: '20%',
              left: '70%',
              itemWidth: 15,
              itemHeight: 15,
              data: [
                  '国家基药品种数',
                  '医院使用国家基药品种数',
                  '医院使用地方基药品种数',
                  '医院配备国家基药品种数',
                  '医院配备地方基药品种数',
              ],
              itemGap: 38,
              textStyle: {
                  color: '#fff',
                  align: 'right',
                  x: 'right',
                  textAlign: 'right',
              },
              selectedMode: true,
              orient: 'vertical',
          },
          series: [
              {
                  name: '刻度线',
                  type: 'gauge',
                  startAngle: -270,
                  splitNumber: 8, //刻度数量
                  endAngle: 90,
                  min: 0,
                  max: 100,
                  // radius: '70%',
                  radius: '50%',
                  center: ['33%', '50%'],
                  title: { show: false },
                  detail: { show: false },
                  axisLine: { show: false },
                  axisTick: { length: 0 },
                  splitLine: {
                      length: '100%',
                      show: true,
                      lineStyle: {
                          color: '#999',
                          width: 1,
                          type: 'solid',
                      },
                  },
                  axisLabel: { show: false },
                  pointer: { show: false },
                  data: [{ value: 0 }],
              },
              {
                  name: '刻度值',
                  type: 'gauge',
                  splitNumber: 8, //刻度数量
                  startAngle: -270,
                  endAngle: 90,
                  clockWise:false,
                  min: 0,
                  max: 80,
                  // radius: '75%',
                  radius: '55%',
                  center: ['33%', '50%'],
                  title: { show: false },
                  detail: { show: false },
                  axisLine: { show: false },
                  axisTick: { length: 0 },
                  splitLine: { show: false, length: -23 },
                  axisLabel: {
                      color: '#fff',
                      fontSize: 12,
                      verticalAlign: 'top',
                      align: 'left',
                      margin: 0,
                  },
                  pointer: { show: false },
                  data: [{ value: 0 }],
              },
              {
                  name: '外环线',  //外环线
                  type: 'pie',
                  clockWise: true,
                  hoverAnimation: false,
                  // radius: ['70%', '71%'],
                  radius: ['50%', '51%'],
                  center: ['33%', '50%'],
                  color: '#B8D1FF',
                  itemStyle: dataStyle,
                  data: [{ value: 0,name:'' }],
              },
              {
                  name: 'Line 4',
                  type: 'pie',
                  clockWise: true,
                  hoverAnimation: false,
                  // radius: ['65%', '69%'],
                  radius: ['43%', '47%'],
                  center: ['33%', '50%'],
                  itemStyle: dataStyle,

                  data: [
                      {
                          value: 7645434,
                          name: '国家基药品种数',
                      },
                      {
                          value: 3612343,
                          name: '国家基药品种数',
                          tooltip: {
                              show: false,
                          },
                          itemStyle: placeHolderStyle,
                      },
                  ],
              },
              {
                  name: 'Line 3',
                  type: 'pie',
                  clockWise: true,
                  // radius: ['50%', '54%'],
                  radius: ['34%', '38%'],
                  center: ['33%', '50%'],
                  itemStyle: dataStyle,
                  hoverAnimation: false,

                  data: [
                      {
                          value: 2632321,
                          name: '医院使用国家基药品种数',
                      },
                      {
                          value: 2212343,
                          name: '医院使用国家基药品种数',
                          tooltip: {
                              show: false,
                          },
                          itemStyle: placeHolderStyle,
                      },
                  ],
              },
              {
                  name: 'Line 2',
                  type: 'pie',
                  clockWise: true,
                  hoverAnimation: false,
                  // radius: ['35%', '39%'],
                  radius: ['25%', '29%'],
                  center: ['33%', '50%'],
                  itemStyle: dataStyle,

                  data: [
                      {
                          value: 1823323,
                          name: '医院使用地方基药品种数',
                      },
                      {
                          value: 1812343,
                          name: '医院使用地方基药品种数',
                          tooltip: {
                              show: false,
                          },
                          itemStyle: placeHolderStyle,
                      },
                  ],
              },
              {
                  name: 'Line 1',
                  type: 'pie',
                  clockWise: true,

                  radius: ['15%', '20%'],
                  center: ['33%', '50%'],
                  itemStyle: dataStyle,
                  hoverAnimation: false,

                  data: [
                      {
                          value: 1342221,
                          name: '医院配备国家基药品种数',
                      },
                      {
                          value: 1912343,
                          name: '医院配备国家基药品种数',
                          tooltip: {
                              show: false,
                          },
                          itemStyle: placeHolderStyle,
                      },
                  ],
              },
              {
                  name: 'Line 0',
                  type: 'pie',
                  clockWise: true,
                  radius: '10%',
                  center: ['33%', '50%'],
                  itemStyle: dataStyle,
                  hoverAnimation: false,
                  data: [
                      {
                          value: 1342221,
                          name: '医院配备地方基药品种数',
                      },
                      {
                          value: 1912343,
                          name: '医院配备地方基药品种数',
                          tooltip: {
                              show: false,
                          },
                          itemStyle: placeHolderStyle,
                      },
                  ],
              }
          ],
      };

      this.makeGraph(this.$refs.outpatientIncomeStatistics,option4)

    },
    makeGraph(ref,option){
      let myChart=echarts.init(ref)
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
.left{float: left;}
.right{float: right;}
.borderBottom-1px{
  border-bottom: .01rem solid #7787C7 ;
}
.borderBottom-2px{
  border-bottom: .02rem solid #7787C7 ;
}
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: .26rem;
        line-height: .26rem;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
    }
  }
  .content-wrap{
    width: 100%;
    height:calc( (100vh - 1.23rem) / 2 - .36rem) ;
    .chart-content{
      width: 100%;
      height:calc( (100vh - 1.23rem) / 2 - .36rem) ;
      float: left;
      overflow: hidden;
    }
  }
  img{width: 100%;float: left;}
</style>